<template>
  <div>
    MyInput1:
    <MyInput v-model="value" />
    <span>相当于</span>
    MyInput2:
    <MyInput :modelValue="value" @update:modelValue="value = $event" />
    MyCheckbox:
    <MyCheckbox v-model:checked="checked" />
    <!-- 相当于 -->
    <span>相当于</span>
    MyCheckbox2:
    <MyCheckbox :checked="checked" @update:checked="checked = $event" />
    <hr />
    <h2>vue3.4更新最新写法</h2>
    <Child v-model="count" v-model:title="title" />
    <h2>处理 v-model 修饰符</h2>
    <Child2 v-model.filterNumber="count2" />
  </div>
</template>

<!-- <script>
import MyInput from './components/MyInput.vue'
import MyCheckbox from './components/MyCheckbox.vue'
import Child from './components/Child.vue'
import Child2 from './components/Child2.vue'
export default {
  name: 'vmodelDemo',
  data() {
    return {
      value: '',
      count: 1,
      checked: false
    }
  },
  components: {
    MyInput,
    MyCheckbox,
    Child,
    Child2
  }
}
</script> -->

<script setup>
import { ref } from 'vue'
defineOptions({
  name: 'vmodelDemo'
})
import MyInput from './components/MyInput.vue'
import MyCheckbox from './components/MyCheckbox.vue'
import Child from './components/Child.vue'
import Child2 from './components/Child2.vue'
const value = ref('')
const count = ref(1)
const count2 = ref(0)
const title = ref('你好')
const checked = ref(false)
</script>
